<template>
<div>
    <p v-if="query" style="background-color:#f8f8f9;line-height:40px;padding-left:5px;padding-right:5px;border:1px solid #e8eaec;border-bottom:0;">
        <AutoQuery ref="auto-query" :query="query" :page="thePage" :buttons="buttons"></AutoQuery>
    </p>
    <Table :ref="tableRef" border :columns="columns" :data="thePage.items" @on-sort-change="handleSortChange" @on-selection-change="handleOnSelectChange" :loading="table_loading"></Table>
    <AutoPage v-model="thePage" style="margin-top:5px;" text-right></AutoPage>
</div>
</template>
<script lang="ts">
import Page from '@common/models/Page'
import AutoPage from '@common/components/AutoPage'
import AutoQuery from '@common/components/AutoQuery'

export default {
    name: "AutoTable",
    components: {
        AutoPage, AutoQuery
    },
    props: {
        query: {
            type: Object,
            default: () => {
                return null;
            }
        },
        columns: {
            type: Array,
            default: () => {
                return [];
            }
        },
        data: {
            type: Array,
            default: () => {
                return [];
            }
        },
        action: {
            type: String,
            default: null
        },
        page: {
            type: Page,
            default: () => {
                return null;
            }
        },
        buttons: {
            type: Array,
            default: () => {
                return ['search','search_all','export_excel'];
            }
        }
    },
    data () {
        return {
            table_loading: false,
            thePage: this.page,
            tableRef: Date.now + '-autotable-table',
            selectedItems: []
        }
    },
    computed: {
        table() {
            return this.$refs[this.tableRef];
        }
    },
    methods: {
        error(content) {
            this.$Modal.error({
                title: '错误',
                content: content,
                okText: '确认',
                cancelText: '取消'
            })
        },
        handleSortChange({column, key, order}) {
            this.thePage.order_by = {};
            this.thePage.order_by[key] = order;
            console.log(this.thePage);
            this.thePage.getData();
        },
        handleOnSelectChange() {
            var selectedItems = this.$refs[this.tableRef].getSelection();
            this.$emit('on-select-change', selectedItems);
            this.selectedItems = selectedItems;
        },
        handleBatch(callback) {
            if(this.selectedItems.length == 0) {
                this.error('未选中任何项');
            }else {
                callback(this.selectedItems);
            }
        },
        getData(callback, errorCallback) {
            this.thePage.getData(callback, errorCallback);
        }
    },
    created() {
        if(this.action) {
            this.thePage = new Page(this.action);
        }
        if(this.thePage == null) {
            throw new Error("必须提供action参数或者page参数");
        }

        this.thePage.beforeGetData.push(() => {
            this.table_loading = true;
        });
        this.thePage.afterGetData.push(result => {
            this.table_loading = false;
        });
    }
}
</script>
